<template>
	<div class="camera-uploader">
		<div class="camera-box">
      <video ref="video" class="camera-preview" v-if="!captureData"></video>
      <img :src="captureData" v-if="captureData" class="camera-preview" />
			<canvas ref="canvas" class="camera-canvas"></canvas>
			<div class="camera-capture" v-if="!files.length">
				<div  @click="capture">拍照</div>
			</div>
		</div>
		<van-uploader
			v-model="files"
			:after-read="afterRead"
			:max-count="1"
			accept="image/*"
			:upload="upload"
		>
			<template #upload>
				<div class="camera-button">
					<span>上传照片</span>
				</div>
			</template>
		</van-uploader>
	</div>
</template>

<script>
import axios from 'axios'
import { Uploader } from 'vant';
export default {
	name: 'CameraUploader',
	components: {
		'van-uploader':Uploader
	},
	data() {
		return {
			files: [],
      captureData: null
		}
	},
	methods: {
		afterRead(file) {
			const canvas = this.$refs.canvas
			const ctx = canvas.getContext('2d')
			const video = this.$refs.video

			canvas.width = video.videoWidth
			canvas.height = video.videoHeight

			ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
			canvas.toBlob(
				(blob) => {
					const formData = new FormData()
					formData.append('file', blob, file.name)

					axios
						.post(this.uploadUrl, formData, {
							headers: {
								'Content-Type': 'multipart/form-data'
							}
						})
						.then((res) => {
							this.$emit('upload-success', res.data)
						})
						.catch((err) => {
							console.log(err)
						})
				},
				'image/jpeg',
				0.9
			)
		},
		upload(file) {
			return new Promise((resolve) => {
				resolve()
			})
		},
		capture() {
			const canvas = this.$refs.canvas
			const ctx = canvas.getContext('2d')
			const video = this.$refs.video

			canvas.width = video.videoWidth
			canvas.height = video.videoHeight

			ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
			const dataURL = canvas.toDataURL('image/jpeg', 0.9)
			console.log(dataURL)
      this.captureData = dataURL
		}
	},
	props: {
		uploadUrl: {
			type: String,
			required: false
		}
	},
	mounted() {
		navigator.mediaDevices
			.getUserMedia({ video: true })
			.then((stream) => {
				const video = this.$refs.video
				video.srcObject = stream
				video.play()
			})
			.catch((err) => {
				console.log(err)
			})
	}
}
</script>

<style scoped>
.camera-uploader {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.camera-box {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	/* overflow: hidden; */
}

.camera-preview {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.camera-canvas {
	display: none;
}

.camera-box:before {
	content: '';
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	border: 1px dashed #fff;
	box-sizing: border-box;
}

.camera-button {
	margin-top: 20px;
	width: 150px;
	height: 50px;
	border-radius: 25px;
	background-color: #ff6a3d;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}
.camera-capture {
	position: absolute;
	bottom: -50px;
}
</style>
